<template>
	<view>
		<!-- <image class="order-bg" mode="widthFix" :src="imageUrl +'list/bg.png'"> -->
		<u-sticky>
			<view class="m-head1">
				<image class="bg" mode="widthFix" :src="imageUrl +'list/bg1.png'"></image>
				<u-navbar @rightClick="rightClick" placeholder :autoBack="false" :safeAreaInsetTop="true" :bgColor="bgColor">
					<view class="m-searchp1 m-searchh1" slot="left">
						<view class="wp">
							<view class="inner">
								<view class="right" v-if="false">
									<u-search placeholder="快速搜索订单" :showAction="false" v-model="keyword"></u-search>
								</view>
							</view>
						</view>
					</view>
				</u-navbar>

				<view class="wp">
					<view class="ul-tabd1">
						<view class="li" v-for="(item, index) in tabList" :key="index" :class="actNum == index ? 'on' : ''"
							@click="tabChange(index)">{{ item.tit }}
						</view>
					</view>
				</view>
				<!-- <view class="m-order1">
            <picker @change="bindPickerChange" :value="index" :range="array">
              <view class="uni-input num2">{{array[index]}}</view>
            </picker>
            <view class="num">点击筛选车牌</view>
            <image class="icon" mode="widthFix" :src="imageUrl +'list/arr.svg'"></image>
          </view> -->
				<view class="m-order1" v-if=false>
					<view class="inner">
						<view class="current-plate" @click="showPopup = true">
							<view class="num num2">{{ selectedPlate }}</view>
							<image class="icon" mode="widthFix" :src="imageUrl +'list/arr.svg'"></image>
						</view>
						<!-- 自定义弹窗 -->
						<view class="custom-popup" v-if="showPopup">
							<!-- 遮罩层 -->
							<view class="popup-mask popup-mask2" @click="showPopup = false"></view>
							<view class="popup-mask" @click="showPopup = false"></view>
							<!-- 弹窗内容 -->
							<view class="popup-content">
								<view class="plate-section">
									<picker-view class="plate-picker" :value="pickerValue" @change="onPickerChange"
										indicator-style="height: 80rpx;">
										<picker-view-column>
											<view class="plate-item" v-for="(plate, index) in plateList" :key="index"
												:class="{ active: pickerValue[0] === index }">
												{{ plate }}
											</view>
										</picker-view-column>
									</picker-view>
								</view>
								<view class="confirm-btn" @click="handleConfirm">
									确定
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
		</u-sticky>
		<view class="row-order">
			<view class="wp">
				<view v-if="actNum != 2">
					<view class="ul-tabchd1" v-if="false">
						<view class="li" v-for="(item, index) in list1" :key="index" :class="actNumch == index ? 'on' : ''"
							@click="actNumch = index">{{ item.name }}
						</view>
					</view>
					<!-- <mList>
          </mList> -->

					<view class="ul-order">
						<view class="li" v-for="(item, index) in outList" :key="index" :class="actNumch == index ? 'on' : ''"
							@click="actNumch = index">
							<view class="li" @click="goDetail(item)">
								<view class="con">
									<navigator hover-class="none" url="" class="top">
										<!-- <navigator hover-class="none" url="" class="top"> -->
										<view class="left">
											<view class="tit">{{ item.plate }}</view>
											<view class="ps" v-if="false">
												<image class="bg" mode="widthFix" :src="imageUrl +'list/bg2.png'"></image>
												<view class="span">已认证</view>
											</view>
										</view>
										<view class="right" v-if="false">免费离开</view>
									</navigator>
									<navigator hover-class="none" url="" class="inner">
										<view class="box">
											<view class="time">
												<view class="span2">{{ item.stayTimeFormatStr }}</view>
											</view>
										</view>
										<view class="desc">
											<view class="p">
												<image class="icon" mode="widthFix" :src="imageUrl +'list/clock.svg'"></image>
												{{ item.inTime }} ~ {{ item.doTime }}
											</view>
											<view class="p">
												<image class="icon" mode="widthFix" :src="imageUrl +'list/map-point.svg'"></image>
												{{ item.parkName }}
											</view>
										</view>
									</navigator>
									<view class="dw">
										<view class="price">
											￥
											<view class="span3">{{ item.payCharge / 100.0 }}元</view>
										</view>
										<view class="btns">
											<view class="btn" v-if="false"> 删除</view>
											<navigator url="/pages/order/appeal" class="btn btn1" hover-class="none" v-if="false">申诉
											</navigator>
											<!-- <view class="btn btn1">申诉</view> -->
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view v-if="actNum == 2">
					<view class="ul-tabchd1" v-if="false">
						<view class="li" v-for="(item, index) in list1" :key="index" :class="actNumch == index ? 'on' : ''"
							@click="actNumch = index">{{ item.name }}
						</view>
					</view>
					<mList>
					</mList>
				</view>
			</view>

		</view>
		<view class="null"></view>
		<view class="foot">
			<image :src="imageUrl +'foot.png'" mode="widthFix" class="bgfoot-img"></image>
			<view class="foot-box">
				<view class="box-detail" @click="tab('/pages/index/index')">
					<image :src="imageUrl +'11.png'" mode="widthFix"></image>
					<view>首页</view>
				</view>
				<view class="box-detail" @click="tab('/pages/realTimeInfo/realTimeInfo')">
					<image :src="imageUrl +'2.png'" mode="widthFix"></image>
					<view>资讯</view>
				</view>
				<image :src="imageUrl +'5.png'" mode="widthFix" class="alone" @click="tab('/pages/parkingPlace/parkingList')">
				</image>
				<view class="box-detail">
					<image :src="imageUrl +'33.png'" mode="widthFix"></image>
					<view class="choice-color">订单</view>
				</view>
				<view class="box-detail" @click="tab('/pages/my/my')">
					<image :src="imageUrl +'4.png'" mode="widthFix"></image>
					<view>我的</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		get,
		post,
		postForm,
		commonSelect
	} from '../../api/myHttps';
	// import mList from '@/components/m-list.vue';
	import dayjs from 'dayjs'

	export default {
		// components: {
		// 	mList
		// },
		data() {
			return {
				showPopup: false,
				selectedPlate: '',
				pickerValue: [0], // 默认选中第一个
				plateList: [],

				// 头部背景色
				bgColor: 'transparent',
				actNum: 0,

				tabList: [{
					tit: '公共停车场'
				}, {
					tit: '道路停车'
				}, {
					tit: '补缴记录'
				}, ],
				actNumch: 0,
				list1: [{
					name: '全部',
				}, {
					name: '免费离开',
				}, {
					name: '付费离开'
				}, {
					name: '欠费离开'
				}, ],
				array: ['鄂 · EE12345', '鄂 · EE12346', '鄂 · EE12347', ],
				index: 0,

				outList: [],
			}
		},
		mounted() {
			// 初始化选中第一个车牌
			this.selectedPlate = this.plateList[0]

			this.goNext3();
			this.init('out');
		},
		methods: {
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/order/det1?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			goNext3() {
				let phone = uni.getStorageSync("phone");
				console.log('phone', phone);
				if (!phone) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			init(parkType) {
				let ownerId = uni.getStorageSync('ownerId');
								let phone = uni.getStorageSync('phone');
				let end = dayjs().format('YYYY-MM-DD');
				// todo：日期可选择
				let start = dayjs().subtract(3, 'month').format('YYYY-MM-DD');
				let endDate = end + ' 23:59:59';
				let startDate = start + ' 00:00:00';
				let current = 1;
				let size = 30;
				if (parkType == 2) {
					let data = {
						"key": "co_charge_rec_zt",
						"operator_id": ownerId,
						"phone": phone,
						"current": current,
						"size": size,
						"parameter": {
							"plate": "",
							"parkId": [],
							"s": startDate,
							"e": endDate
						}
					};
					commonSelect(data).then((res) => {
						console.log(res.records);
						
						for (var i = 0; i < res.records.length; i++) {
							res.records[i]
						}
						this.outList = res.records;
					})
				} else {
					get('/city-mobile/plate/pagePlateOutRec?ownerId=' + ownerId +
						'&startDate=' + startDate +
						'&endDate=' + endDate +
						'&current=' + current +
						'&size=' + size +
						'&parkType=' + parkType, null).then((res) => {
						console.log(res.records);
						this.outList = res.records;
					})
				}

			},
			tabChange(val) {
				this.actNum = val;
				console.log(this.actNum);
				let parkType = 'out';
				if (1 == val) {
					parkType = 'in';
				} else if (2 == val) {
					parkType = 2;
				}
				this.init(parkType);
			},
			tab(e) {
				uni.switchTab({
					url: e
				})
			},
			// picker值变化
			onPickerChange(e) {
				this.pickerValue = e.detail.value
			},

			// 确认选择
			handleConfirm() {
				const selectedIndex = this.pickerValue[0]
				this.selectedPlate = this.plateList[selectedIndex]
				this.showPopup = false

				// 这里可以添加筛选逻辑
				// uni.showToast({
				// 	title: `已选择：${this.selectedPlate}`,
				// 	icon: 'success'
				// })
			},
			handleCityConfirm(e) {
				this.selectedCity = e.value[0].label
				this.showPicker = false
			},
			// 头部滚动
			onPageScroll(res) {
				if (res.scrollTop >= 60) {
					this.bgColor = 'transparent'
				} else {
					this.bgColor = 'transparent'
				}
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4FAF7;
	}


	.m-pop {
		position: relative;
	}

	.null {
		width: 750rpx;
		height: 220rpx;
	}

	.foot {
		width: 750rpx;
		height: 198rpx;
		position: fixed;
		bottom: 0;
		z-index: 99;

		.bgfoot-img {
			width: 750rpx;
			height: 198rpx;
		}

		.foot-box {
			width: 650rpx;
			height: 94rpx;
			position: absolute;
			top: 60rpx;
			left: 50rpx;
			display: flex;
			justify-content: space-between;

			.alone {
				width: 100rpx;
				height: 100rpx;
				margin-top: -20rpx;
			}

			.box-detail {
				width: 90rpx;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				view {
					font-size: 22rpx;
					color: rgba(40, 40, 40, 0.6);
					line-height: 36rpx;
					margin-top: 10rpx;
					width: 100%;
					text-align: center;
				}

				.choice-color {
					color: #1C274C !important;
				}
			}
		}
	}
</style>